<template>
  <layout title="switch开关">
    <layout-content title="基础使用">
      <view class="tn-flex-center-around">
        <tn-switch v-model="basicSwitch"></tn-switch>
        <tn-switch v-model="basicSwitch" disabled></tn-switch>
        <tn-switch v-model="basicSwitch" shape="round"></tn-switch>
        <tn-switch v-model="basicSwitch" shape="round" loading></tn-switch>
      </view>
    </layout-content>

    <layout-content title="设置尺寸">
      <view class="tn-flex-center-around">
        <tn-switch v-model="basicSwitch" size="sm"></tn-switch>
        <tn-switch v-model="basicSwitch"></tn-switch>
        <tn-switch v-model="basicSwitch" size="lg"></tn-switch>
        <tn-switch v-model="basicSwitch" size="xl"></tn-switch>
      </view>
      <view class="tn-flex-center-around tn-margin-top-sm">
        <tn-switch v-model="basicSwitch" size="sm" shape="round"></tn-switch>
        <tn-switch v-model="basicSwitch" shape="round"></tn-switch>
        <tn-switch v-model="basicSwitch" size="lg" shape="round"></tn-switch>
        <tn-switch v-model="basicSwitch" size="xl" shape="round"></tn-switch>
      </view>
    </layout-content>

    <layout-content title="设置颜色">
      <view class="tn-flex-center-start">
        <tn-switch v-model="basicSwitch" active-color="tn-bg-green" inactive-color="tn-bg-red"></tn-switch>
        <view class="tn-margin-left-sm">
          <tn-switch v-model="basicSwitch" shape="round" active-color="tn-bg-green" inactive-color="tn-bg-red"></tn-switch>
        </view>
      </view>
    </layout-content>

    <layout-content title="设置图标">
      <view class="tn-flex-center-start">
        <tn-switch v-model="basicSwitch" active-icon="sport-run" inactive-icon="sport-jog"></tn-switch>
        <view class="tn-margin-left-sm">
          <tn-switch v-model="basicSwitch" shape="round" active-icon="sport-run" inactive-icon="sport-jog"></tn-switch>
        </view>
      </view>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnSwitch from '@/tuniao-ui/components/tn-switch/src/Switch.vue'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// switch值
let basicSwitch = ref<boolean>(false)
</script>

<style lang="scss" scoped>
</style>
